<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <navigator :url="`/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`" class="swiper-item"><image :src="item.image_src"></image></navigator>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperList: []
    };
  },
  onLoad() {
    // 页面刚加载的时候 调用请求接口的方法
    this.getSwiperList();
  },
  methods: {
    // 请求轮播图数据的方法
    async getSwiperList() {
      const { data } = await uni.$http.get('/api/public/v1/home/swiperdata');
      console.log(data);
      if (data.meta.status !== 200) {
        return uni.$showMsg();
      }
      this.swiperList = data.message;
    }
  }
};
</script>

<style lang="scss">
swiper {
  height: 330rpx;
}
.swiper-item,
image {
  width: 100%;
  height: 100%;
}
</style>
